<template>
  <div>
    <div v-if="trackPoints.length === 0" style="display: flex;justify-content: center;align-items: center">
      <p>无轨迹点</p>
    </div>
    <div v-else ref="map" style="height: 900px;"></div>
  </div>
</template>

<script>
export default {
  name: 'LocationRecord',
  props: {
    trackPoints: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      map: null,
      bounds: null
    }
  },
  mounted() {
    this.initMap();
    this.drawTrack();
  },
  updated() {
    if (this.trackPoints.length > 0) {
      this.initMap();
      this.drawTrack();
    } else {
      this.$message.error("未查询到轨迹点")
      this.map.destroy()
    }
  },
  methods: {
    initMap() {
      // 创建地图实例
      this.map = new AMap.Map(this.$refs.map, {
        zoom: 8,
        center: this.trackPoints[this.trackPoints.length-1],
        viewMode: '3D' // 开启3D视图模式
      });

      // 创建空的地图Bounds对象
      this.bounds = new AMap.Bounds();
    },

    drawTrack() {
      // 创建轨迹折线
      const trackPath = new AMap.Polyline({
        path: this.trackPoints,
        strokeColor: '#3366FF',
        strokeOpacity: 1,
        strokeWeight: 5,
        strokeStyle: 'solid',
        strokeDasharray: [10, 5]
      });

      // 将轨迹折线添加到地图上
      this.map.add(trackPath);

      // 获取轨迹折线的范围，并合并到bounds对象中
      const trackBounds = trackPath.getBounds();
      this.bounds.extend(trackBounds.getSouthWest());
      this.bounds.extend(trackBounds.getNorthEast());

      // 调整地图视野以显示整条轨迹
      this.map.setFitView(this.bounds);
    }
  }
};
</script>
